<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font_xf6rya7gtdr/iconfont.css">
</head>
<style>
    .containbox {
        position: relative;
    }

    .contain {
        width: 1200px;
        height: 800px;
        background-color: antiquewhite;
        margin: 0 auto;
        /* display: flex;
        justify-content: center;
        align-items: center; */
        /* overflow: hidden; */
        /* position: relative; */
    }

    .containinfo {
        /* background-color: azure; */
        /* overflow: hidden; */
        width: 1200px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        /* height: 410px;
        background-color: black; */
    }

    .containinfo img {
        width: 1200px;
    }

    .left {
        position: fixed;
        top: 50%;
        left: 5%;
        transform: translate(-50%, -50%);
        height: 300px;
        width: 58px;
        background-color: aquamarine;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
    }

    .iconfont {
        color: #757779;
        font-size: 40px;
    }

    .infocolor {
        color: red;
    }

    .comment_info {
        width: 100%;
        height: 200px;
        background-color: blanchedalmond;
    }

    .atitle_box {
        width: 100%;
        text-align: center;
    }

    .comment_box {
        display: none;
    }
</style>

<body>
    <div class="containbox">
        <div class="contain">
            <div class="containinfo">
            </div>
            <div class="comment_info">
                <button class="comment_btn">评论</button>
                <div class="comment_content">
                    <!-- <div class="txt"><span>曾志尧：</span><span>我是傻逼</span></div> -->
                </div>
                <div class="comment_box">
                    <input type="text" name="comment_input">
                    <button class="comment_sumbit">评论</button>
                </div>

            </div>
        </div>

        <div class="left">
            <div class="dianz">
                <span class="iconfont icon-dianzanshoucang dianzico"></span>
                <p>点赞</p>

            </div>
            <br>
            <div class="acollection">
                <span class="iconfont icon-shoucang acollectionimg"></span>
                <p>收藏</p>

            </div>

            <div class="comment">
                <span class="iconfont icon-icon_comment "></span>
                <p>评论</p>
            </div>


        </div>

        <script src="./js/axios.min.js"></script>
        <script src="./js/axiosconfig.js"></script>
        <script src="./js/cookies.js"></script>
        <script>

            let containinfo = document.querySelector(".containinfo")
            let dianzico = document.querySelector('.dianzico')
            let acollectionimg = document.querySelector(".acollectionimg")
            let str = ""
            axios.get(`/getarticleinfo?aid=${window.location.href.split('=')[1]}`)
                .then(function (response) {
                    // 处理成功情况
                    console.log(response.data.post);
                    console.log("data", response.data);
                    // 查询是否点赞收藏
                    if (response.data.post1) {
                        dianzico.classList.add("infocolor")
                    }
                    if (response.data.post2) {
                        acollectionimg.classList.add("infocolor")
                    }

                    let item = response.data.post;
                    str += `
                <div class='atitle_box'>
                    <h1 class='h1box'>${item.atitle}</h1>
                </div>
                <div><span>${item.alabel}</span></div>
                <div> ${item.acontent}</div>`
                    containinfo.innerHTML += str
                    //加载评论
                    let comment_content = document.querySelector(".comment_content")
                    let str1 = ''
                    axios.get(`/getcomment`)
                        .then(function (response) {
                            let res = response.data.results
                            res.forEach(item => {
                                if (item.rid == 0) {
                                    str1 += `<div class="${item.uid}"><span class="${item.uid}">${item.uname}:</span><span class="${item.uid}">${item.comment}</span></div>`

                                }
                                else {
                                    str1 += `<div class="${item.uid} "><span class="${item.uid}">${item.uname}回复${item.rname}:</span><span class="${item.uid}">${item.comment}</span></div>`

                                }
                            });
                            comment_content.innerHTML = str1
                            // <div class="txt"><span>曾志尧：</span><span>我是傻逼</span></div>


                        })
                        .catch(function (error) {
                            // 处理错误情况
                            console.log(error);
                        })
                        .then(function () {
                            // 总是会执行
                        });
                })
                .catch(function (error) {
                    // 处理错误情况
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                });


            // 点赞事件
            (function () {
                let dianz = document.querySelector('.dianz')
                let dianzico = document.querySelector('.dianzico')
                dianz.onclick = function () {
                    if (!getcookie("tel")) {
                        alert('请先登录')
                        window.location.href = './index.html'
                    }
                    else {
                        dianzico.classList.toggle("infocolor")
                        axios.get('/updataalike')
                            .then(function (response) {
                                // 处理成功情况
                                console.log(response);
                            })
                            .catch(function (error) {
                                // 处理错误情况
                                console.log(error);
                            })
                            .then(function () {
                                // 总是会执行
                            });
                    }
                }

            })();
            // 收藏事件
            (function () {


                let acollection = document.querySelector(".acollection")
                let acollectionimg = document.querySelector(".acollectionimg")
                acollection.onclick = function () {
                    if (!getcookie("tel")) {
                        alert('请先登录')
                        window.location.href = './index.html'
                    }
                    else {
                        acollectionimg.classList.toggle("infocolor")

                        axios.get('/updataacollection')
                            .then(function (response) {
                                // 处理成功情况
                                console.log(response);
                            })
                            .catch(function (error) {
                                // 处理错误情况
                                console.log(error);
                            })
                            .then(function () {
                                // 总是会执行
                            });
                    }



                }
            })();
            // 评论事件
            (function () {
                let comment = document.querySelector(".comment")
                let comment_btn = document.querySelector(".comment_btn")
                let comment_box = document.querySelector(".comment_box")
                let comment_input = document.querySelector("input[name=comment_input]")
                let comment_sumbit = document.querySelector(".comment_sumbit")
                // 左侧评论直接到底部
                comment.onclick = function () {
                    // console.log(1111);
                    window.scrollTo(0, document.documentElement.scrollHeight - document.documentElement.clientHeight);
                }
                // 添加点击评论事件
                comment_btn.onclick = function () {
                    comment_box.style.display = 'block'
                    comment_input.rid = 0
                }
                let comment_content = document.querySelector(".comment_content")
                comment_content.onclick = function () {
                    console.log(event.target.classList[0]);
                    comment_box.style.display = 'block'
                    comment_input.rid = event.target.classList[0]
                }
                // 提交评论发起请求
                comment_sumbit.onclick = function () {
                    comment_box.style.display = 'none'
                    axios.post('/addcomment', {
                        comment: comment_input.value,
                        rid: comment_input.rid
                    })
                        .then(function (response) {
                            let comment_content = document.querySelector(".comment_content")
                            let str1 = ''
                            axios.get(`/getcomment`)
                                .then(function (response) {
                                    let res = response.data.results
                                    res.forEach(item => {
                                        if (item.rid == 0) {
                                            str1 += `<div class="${item.uid}"><span class="${item.uid}">${item.uname}:</span><span class="${item.uid}">${item.comment}</span></div>`

                                        }
                                        else {
                                            str1 += `<div class="${item.uid} "><span class="${item.uid}">${item.uname}回复${item.rname}:</span><span class="${item.uid}">${item.comment}</span></div>`

                                        }
                                    });
                                    comment_content.innerHTML = str1
                                    // <div class="txt"><span>曾志尧：</span><span>我是傻逼</span></div>


                                })
                                .catch(function (error) {
                                    // 处理错误情况
                                    console.log(error);
                                })
                                .then(function () {
                                    // 总是会执行
                                });

                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }




            })();


        </script>

</body>

</html>